CSS Grid Subgrid Mahorati: Meros qilib olingan Grid Maket Namunalar

CSS Grid veb-maket sohasida inqilob qildi va dasturchilarga elementlarning tuzilishi va joylashuvini misli ko'rilmagan darajada nazorat qilish imkonini berdi. Biroq, bir nechta komponentlar bo'ylab murakkab grid tuzilmalarini boshqarish tezda qiyinlashishi mumkin. Aynan shu yerda CSS Grid Subgrid yordamga keladi. Subgrid ichki grid konteynerlariga o'zlarining asosiy gridlarining yo'l o'lchamlarini meros qilib olishga imkon beradi va shu bilan izchil va oson saqlanadigan maket namunalarini yaratadi. Ushbu maqola CSS Grid Subgrid'ni o'zlashtirish bo'yicha keng qamrovli qo'llanmani taqdim etadi va haqiqatdan ham optimallashtirilgan veb-dizayn ish jarayoni uchun meros qilib olingan grid maket namunalariga e'tibor qaratadi.

CSS Grid Asoslarini Tushunish

Subgrid'ga sho'ng'ishdan oldin, CSS Grid haqida mustahkam tushunchaga ega bo'lish muhim. CSS Grid sizga qatorlar va ustunlar yordamida ikki o'lchovli maketlar yaratish imkonini beradi. Asosiy xususiyatlarga quyidagilar kiradi:

• grid-container: Elementni grid konteyneri sifatida e'lon qiladi.
• grid-template-rows: Griddagi har bir qatorning balandligini belgilaydi.
• grid-template-columns: Griddagi har bir ustunning kengligini belgilaydi.
• grid-row-start, grid-row-end, grid-column-start, grid-column-end: Grid elementlarining grid ichidagi joylashuvini belgilaydi.
• grid-gap, row-gap, column-gap: Grid qatorlari va ustunlari orasidagi bo'shliqni belgilaydi.

Misol: Oddiy CSS Grid

            
.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 10px;
}

            

              
                Copy
              
            
          

Ushbu CSS uchta teng kenglikdagi ustun va ular orasida 10 piksellik bo'shliq bo'lgan grid konteynerini yaratadi.

CSS Grid Subgrid bilan Tanishtiruv

CSS Grid Subgrid - bu ichki joylashtirilgan grid (subgrid)ga o'zining asosiy grididan qator va/yoki ustun ta'riflarini meros qilib olishga imkon beruvchi kuchli xususiyat. Bu asosiy va ichki gridlar o'rtasida mustahkam aloqa yaratadi va ularning sinxronlashgan holda qolishini ta'minlaydi. grid-template-rows va grid-template-columns xususiyatlari subgrid qiymatiga o'rnatilganda, brauzerga asosiy gridning yo'l ta'riflaridan foydalanishni buyuradi.

Nima uchun Subgrid'dan foydalanish kerak?

• Muvofiqlik: Ichki joylashtirilgan grid elementlarining o'zlarining asosiy gridi bilan mukammal moslashishini ta'minlaydi.
• Oson saqlanish: Ichki gridlarda yo'l o'lchamlarini qayta belgilashga hojat qoldirmasdan maket boshqaruvini soddalashtiradi.
• Moslashuvchanlik: Yanada moslashuvchan va sezgir maketlar yaratishga yordam beradi.
• Kodning qisqarishi: Grid ta'riflarini meros qilib olish orqali ortiqcha kodni kamaytiradi.

CSS Grid Subgrid'ni Amalga Oshirish: Qadamma-qadam Qo'llanma

CSS Grid Subgrid'ni qanday amalga oshirishni ko'rsatish uchun amaliy misolni ko'rib chiqamiz.

1-qadam: Asosiy Gridni Belgilash

Avval asosiy grid konteynerini yarating va uning qatorlari va ustunlarini belgilang.

            
<div class="grid-container">
 <div class="item">Element 1</div>
 <div class="item">Element 2</div>
 <div class="item subgrid-container">
 <div class="sub-item">Sub-element 1</div>
 <div class="sub-item">Sub-element 2</div>
 </div>
 <div class="item">Element 4</div>
</div>

            

              
                Copy
              
            
          

            
.grid-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* To'rtta teng ustun */
 grid-template-rows: auto auto;
 grid-gap: 10px;
}

.item {
 background-color: #eee;
 padding: 20px;
 border: 1px solid #ccc;
}

            

              
                Copy
              
            
          

Bu to'rtta teng ustunli grid yaratadi. Uchinchi element bizning subgridimizni o'z ichiga oladi.

2-qadam: Subgrid Konteynerini Yaratish

Keyin, subgrid konteynerini belgilang va uning grid-template-columns xususiyatini subgrid ga o'rnating. Shuningdek, u asosiy grid ichida qaysi ustun chiziqlarini qamrab olishi kerakligini belgilaymiz.

            
.subgrid-container {
 display: grid;
 grid-column: 3 / span 2; /* Asosiy gridning uchinchi va to'rtinchi ustunlarini qamrab oladi */
 grid-template-columns: subgrid; /* Ustun ta'riflarini asosiy griddan meros qilib oladi */
 grid-gap: 5px;
 background-color: #f0f0f0;
 padding: 10px;
}

            

              
                Copy
              
            
          

grid-template-columns: subgrid deb o'rnatish orqali subgrid konteyneri endi asosiy griddan ustun ta'riflarini meros qilib oladi. grid-column xususiyati ikkita ustun yo'lini qamrab olganligi sababli, subgridning o'zi asosiy gridning 3 va 4-ustun yo'llari kengligiga mos keladigan ikkita ustun yo'lini o'z ichiga oladi.

3-qadam: Subgrid Elementlarini Uslublash

Nihoyat, subgrid elementlarini kerak bo'lganda uslublang.

            
.sub-item {
 background-color: #ddd;
 padding: 10px;
 border: 1px solid #bbb;
}

            

              
                Copy
              
            
          

To'liq Kod Misoli

            
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Subgrid Misoli</title>
<style>
.grid-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* To'rtta teng ustun */
 grid-template-rows: auto auto;
 grid-gap: 10px;
}

.item {
 background-color: #eee;
 padding: 20px;
 border: 1px solid #ccc;
}

.subgrid-container {
 display: grid;
 grid-column: 3 / span 2; /* Asosiy gridning uchinchi va to'rtinchi ustunlarini qamrab oladi */
 grid-template-columns: subgrid; /* Ustun ta'riflarini asosiy griddan meros qilib oladi */
 grid-gap: 5px;
 background-color: #f0f0f0;
 padding: 10px;
}

.sub-item {
 background-color: #ddd;
 padding: 10px;
 border: 1px solid #bbb;
}
</style>
</head>
<body>

<div class="grid-container">
 <div class="item">Element 1</div>
 <div class="item">Element 2</div>
 <div class="item subgrid-container">
 <div class="sub-item">Sub-element 1</div>
 <div class="sub-item">Sub-element 2</div>
 </div>
 <div class="item">Element 4</div>
 <div class="item">Element 5</div>
 <div class="item">Element 6</div>
 <div class="item">Element 7</div>
 <div class="item">Element 8</div>
</div>

</body>
</html>

            

              
                Copy
              
            
          

Ushbu misolda, subgrid elementlari asosiy gridning uchinchi va to'rtinchi ustunlari bilan mukammal moslashadi, bu esa subgridning izchil maketlar yaratishdagi kuchini namoyish etadi.

Ilg'or Subgrid Texnikalari

Qatorlar va Ustunlarni Qamrab Olish

Subgrid elementlari, oddiy grid elementlari kabi, subgrid konteyneri ichida bir nechta qator yoki ustunlarni qamrab olishi mumkin. Bu sizga meros qilib olingan grid tuzilmasi ichida murakkabroq maketlar yaratish imkonini beradi.

            
<div class="grid-container">
 <div class="item">Element 1</div>
 <div class="item">Element 2</div>
 <div class="item subgrid-container">
 <div class="sub-item" style="grid-column: 1 / span 2;">Sub-element 1 (2 ta ustunni qamrab olgan)</div>
 <div class="sub-item">Sub-element 2</div>
 </div>
 <div class="item">Element 4</div>
</div>

            

              
                Copy
              
            
          

Ushbu misolda, `Sub-element 1` subgrid ichida ikkita ustunni qamrab oladi.

Subgrid'ni Nomlangan Grid Chiziqlari Bilan Birlashtirish

Nomlangan grid chiziqlari subgrid bilan birgalikda yanada semantik va oson saqlanadigan maketlar yaratish uchun ishlatilishi mumkin. Avval, asosiy gridda nomlangan grid chiziqlarini belgilang.

            
.grid-container {
 display: grid;
 grid-template-columns: [start] 1fr [mid] 1fr [end];
 grid-template-rows: auto;
}

            

              
                Copy
              
            
          

Keyin, subgrid ichida ushbu nomlangan grid chiziqlariga murojaat qiling.

            
<div class="grid-container">
 <div class="item">Element 1</div>
 <div class="item subgrid-container">
 <div class="sub-item" style="grid-column: start / mid;">Sub-element 1</div>
 <div class="sub-item" style="grid-column: mid / end;">Sub-element 2</div>
 </div>
</div>

            

              
                Copy
              
            
          

Bu maketni o'qish uchun qulayroq va o'zgartirish uchun osonroq qiladi.

`grid-template-rows: subgrid` dan Foydalanish

grid-template-columns: subgrid dan foydalanganingiz kabi, asosiy griddan qator ta'riflarini meros qilib olish uchun grid-template-rows: subgrid dan ham foydalanishingiz mumkin. Bu, ayniqsa, elementlarning balandligi sahifaning turli qismlarida moslashishi kerak bo'lgan maketlar yaratishda foydalidir.

            
.grid-container {
 display: grid;
 grid-template-rows: auto auto auto;
 grid-template-columns: 1fr;
}

.subgrid-container {
 display: grid;
 grid-row: 2 / span 2; /* Asosiy gridning 2 qatorini qamrab oladi */
 grid-template-rows: subgrid; /* Qator ta'riflarini asosiy griddan meros qilib oladi */
}

            

              
                Copy
              
            
          

CSS Grid Subgrid uchun Haqiqiy Hayotdagi Foydalanish Holatlari

CSS Grid Subgrid keng ko'lamli real hayotiy stsenariylarda qo'llanilishi mumkin. Mana bir nechta misollar:

1. Murakkab Formalar

Formalar ko'pincha yorliqlar va kiritish maydonlarining aniq tekislanishini talab qiladi. Subgrid forma elementlari turli konteynerlar ichida joylashtirilgan bo'lsa ham, ularning izchil tekislanishini ta'minlashi mumkin. Tasavvur qiling, ko'pmillatli kompaniya formadan foydalanmoqda. Subgrid tarjima qilingan yorliq uzunliklari yoki forma murakkabligidan qat'i nazar, maket izchilligini saqlashga yordam beradi.

2. Mahsulotlar Ro'yxati

Elektron tijorat veb-saytlari subgrid yordamida mahsulot rasmlari, tavsiflari va narxlari bir nechta qator va ustunlar bo'ylab mukammal tekislangan izchil mahsulot ro'yxatlarini yaratishi mumkin. Turli sotuvchilarning mahsulotlarini namoyish etuvchi global bozorni ko'rib chiqing. Subgrid har xil mahsulot rasmlari o'lchamlari va tavsiflariga qaramay vizual uyg'unlikni ta'minlaydi.

3. Boshqaruv Paneli Maketlari

Boshqaruv panellari ko'pincha bir-biriga uzluksiz tekislanishi kerak bo'lgan bir nechta panellar va vidjetlarni o'z ichiga oladi. Subgrid panellarda turli miqdordagi kontent bo'lsa ham, izchil maketni saqlashga yordam beradi. Masalan, global moliyaviy boshqaruv paneli ko'rsatilgan ma'lumotlardan qat'i nazar, asosiy ishlash ko'rsatkichlari (KPI) va jadvallarni tekislash uchun subgrid'dan foydalanishi mumkin.

4. Jurnal va Blog Maketlari

Jurnal va blog maketlari ko'pincha maqolalar, rasmlar va videolar kabi turli xil kontent turlarini joylashtirish uchun murakkab grid tuzilmalarini talab qiladi. Subgrid sahifaning turli qismlarida izchil maketni saqlashga yordam beradi. Ko'p tilli yangiliklar portalini o'ylab ko'ring. Subgrid maqola maketlarini turli tillardagi matn uzunliklari va displey afzalliklariga moslashish uchun uzluksiz moslashtirishi mumkin.

5. Izchil Yuqori va Pastki Qism Dizayni

Ko'pincha, veb-saytlar turli bo'limlarda izchil yuqori va pastki qismni saqlashni xohlaydi. Subgrid navigatsiya elementlari, logotiplar va ijtimoiy media ikonalarining ushbu global elementlarda joylashuvi va tekislanishi izchil bo'lishini ta'minlaydi.

Brauzer Muvofiqligi va Muqobil Yechimlar

CSS Grid Subgrid ajoyib brauzer qo'llab-quvvatlashiga ega bo'lsa-da, bu xususiyatni to'liq qo'llab-quvvatlamaydigan eski brauzerlarni hisobga olish muhimdir. Caniuse.com kabi manbalardan foydalanib, joriy brauzer qo'llab-quvvatlashini tekshiring. Izchil foydalanuvchi tajribasini ta'minlash uchun ushbu brauzerlar uchun muqobil yechimlar yoki alternativ maketlarni taqdim eting. Keng tarqalgan yondashuvlardan biri - subgrid qo'llab-quvvatlashini aniqlash uchun xususiyat so'rovlaridan foydalanish va agar u mavjud bo'lmasa, alternativ uslublarni qo'llash.

            
@supports not (grid-template-columns: subgrid) {
 /* Subgrid'ni qo'llab-quvvatlamaydigan brauzerlar uchun muqobil uslublar */
 .subgrid-container {
 display: block; /* Yoki boshqa maket usulidan foydalaning */
 }
}

            

              
                Copy
              
            
          

CSS Grid Subgrid'dan Foydalanish uchun Eng Yaxshi Amaliyotlar

CSS Grid Subgrid'ning afzalliklarini maksimal darajada oshirish uchun ushbu eng yaxshi amaliyotlarga rioya qiling:

• Maketingizni Rejalashtiring: Kod yozishni boshlashdan oldin, grid tuzilmangizni diqqat bilan rejalashtiring. Asosiy grid va subgrid konteynerlarini aniqlang va ular bir-biri bilan qanday o'zaro ta'sir qilishini belgilang.
• Semantik HTML'dan Foydalaning: Kontentingizni mantiqiy tuzish uchun semantik HTML elementlaridan foydalaning. Bu kodingizni o'qish uchun qulayroq va saqlash uchun osonroq qiladi.
• Oddiy Qiling: Grid tuzilmalaringizni haddan tashqari murakkablashtirishdan saqlaning. Subgrid'dan faqat izchillik va tekislashni saqlash zarur bo'lganda foydalaning.
• Puxta Sinovdan O'tkazing: Maketlaringizni turli brauzerlar va qurilmalarda sinab ko'ring, ularning moslashuvchan va foydalanishga qulay ekanligiga ishonch hosil qiling.
• Kodingizni Hujjatlashtiring: Grid tuzilmalaringiz va subgrid amalga oshirishlaringizning maqsadini tushuntirish uchun CSS'ingizga izohlar qo'shing.
• Foydalanish Imkoniyati Masalalari: Grid maketlaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. Tegishli ARIA atributlaridan foydalaning va kontentingiz mantiqiy tuzilganligiga ishonch hosil qiling.

CSS Grid Subgrid'ga Alternativalar

CSS Grid Subgrid kuchli vosita bo'lsa-da, shunga o'xshash maket namunalariga erishish uchun alternativ yondashuvlar mavjud. Bularga quyidagilar kiradi:

• CSS Flexbox: Flexbox - moslashuvchan va sezgir maketlar yaratish uchun ishlatilishi mumkin bo'lgan bir o'lchovli maket modeli. U ikki o'lchovli maketlar uchun Grid kabi kuchli bo'lmasa-da, oddiyroq tekislash vazifalari uchun foydali bo'lishi mumkin.
• Qo'lda Belgilangan Yo'l O'lchamlari Bilan CSS Grid: Siz ichki gridlarda yo'l o'lchamlarini asosiy gridga mos keladigan tarzda qo'lda belgilashingiz mumkin. Biroq, bu yondashuv kamroq saqlanuvchan va nomuvofiqliklarga olib kelishi mumkin.
• JavaScript Kutubxonalari: Ilg'or maket imkoniyatlarini ta'minlaydigan bir nechta JavaScript kutubxonalari mavjud. Bu kutubxonalar faqat CSS yordamida erishish qiyin bo'lgan murakkab maketlar uchun foydali bo'lishi mumkin.

Umumiy Subgrid Muammolarini Bartaraf Etish

CSS Grid va Subgrid'ni yaxshi tushungan holda ham, ba'zi umumiy muammolarga duch kelishingiz mumkin. Mana bir nechta muammolarni bartaraf etish bo'yicha maslahatlar:

• Subgrid Yo'l O'lchamlarini Meros Qilib Olmayapti: Subgrid konteynerida grid-template-columns va/yoki grid-template-rows ni subgrid ga o'rnatganingizga ishonch hosil qiling. Shuningdek, subgrid konteyneri grid konteynerining to'g'ridan-to'g'ri ichki elementi ekanligini tekshiring.
• Tekislash Muammolari: Subgrid konteyneri va uning elementlaridagi grid-column va grid-row xususiyatlarini ikki marta tekshirib ko'ring, ular grid ichida to'g'ri joylashtirilganligiga ishonch hosil qiling.
• Kutilmagan Bo'shliqlar: grid-gap xususiyati ham asosiy gridda, ham subgridda to'g'ri o'rnatilganligini tekshiring.
• Moslashuvchanlik Muammolari: Turli ekran o'lchamlari uchun grid maketini sozlash uchun media so'rovlaridan foydalaning. Yo'l o'lchamlari turli kontent uzunliklariga moslasha oladigan darajada moslashuvchan ekanligiga ishonch hosil qiling.

Xulosa

CSS Grid Subgrid izchil, oson saqlanadigan va moslashuvchan maketlar yaratish uchun kuchli vositadir. CSS Grid va Subgrid asoslarini tushunib, eng yaxshi amaliyotlarga rioya qilish orqali siz ushbu xususiyatning to'liq salohiyatini ochishingiz va haqiqatan ham ajoyib veb-dizaynlar yaratishingiz mumkin. Murakkab formalar, mahsulot ro'yxatlari yoki boshqaruv paneli maketlarini yaratayotgan bo'lsangiz ham, Subgrid ish jarayoningizni optimallashtirishga va global auditoriyaga xizmat ko'rsatadigan vizual jozibali va funktsional veb-saytlar yaratishga yordam beradi. Subgrid'ni qabul qiling va CSS maket mahoratingizni keyingi bosqichga ko'taring!

Yakuniy eslatma sifatida, CSS Grid bilan bog'liq so'nggi yangilanishlar va xususiyatlarni o'rganishda davom eting. Veb-dizayn landshafti doimiy ravishda rivojlanib bormoqda va eng yangi texnologiyalardan xabardor bo'lish zamonaviy va global miqyosda qulay veb-saytlar yaratish uchun juda muhimdir.